<template>
  <div class="index">
    <!-- ////顶部搜索栏 -->
    <div class="top-search">
      <div class="content">
        <!-- 左侧跳动文字 -->
        <div class="word">
          <span class="one glyphicon glyphicon-volume-up" aria-hidden="true"></span>
          <!-- <ul>
            <li>
              SAP文库全新改版，注册最多
              <strong style="color:#ff0000">赠送400积分</strong>用于购买各类资料！
            </li>
            <li>
              欢迎猎头和HR入住，
              <strong style="color:#ff0000">免费发布SAP招聘信息！本站5个微信群同步免费推送！</strong>
            </li>
            <li>本站所有内容均来自互联网用户分享，如有违规内容，纯属本站管理不善，请及时联系我们删除。</li>
          </ul>-->
          <ul class="toTop">
            <li v-for="(item,index) in wordList" :key="index">
              <span>{{item.ti}}</span>
              <strong style="color:#ff0000" v-show="item.str">{{item.str}}</strong>
              <span v-show="item.wei">{{item.wei}}</span>
            </li>
          </ul>
        </div>

        <!-- 右侧搜索 -->
        <div class="search clearfix">
          <div
            class="input-group navbar-form navbar-right"
            style="width:200px;margin:0px;padding:5px;"
            role="search"
          >
            <input
              type="text"
              id="Keyword"
              name="keyword"
              required
              class="form-control input-sm"
              placeholder="搜索本站SAP资料"
            />
            <div class="input-group-btn">
              <input type="button" id="Search" class="btn btn-default btn-sm" value="Go!" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ////课程招生 -->
    <div class="course">
      <div class="content">
        <el-row :gutter="20">
          <el-col :span="18">
            <!-- 左侧招生图片 -->
            <div class="left">
              <el-row class="row1">
                <el-col>
                  <a href="javascript:;">
                    <img src="../../assets/wyq-image/course01.jpg" />
                  </a>
                </el-col>
                <el-col>
                  <a href="javascript:;" class="t">
                    <img src="../../assets/wyq-image/course02.jpg" />
                  </a>
                </el-col>
              </el-row>
              <el-row class="row2">
                <el-col>
                  <a href="javascript:;">
                    <img src="../../assets/wyq-image/course03.jpg" />
                  </a>
                </el-col>
                <el-col>
                  <a href="javascript:;">
                    <img src="../../assets/wyq-image/course04.jpg" />
                  </a>
                </el-col>
                <el-col>
                  <a href="javascript:;">
                    <img src="../../assets/wyq-image/course05.jpg" />
                  </a>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <!-- 右侧二维码 -->
            <div class="right">
              <el-row class="first" :gutter="3">
                <el-col :span="8">
                  <img
                    src="../../assets/wyq-image/kefu.gif"
                    class="img-responsive"
                    style="opacity:0.8;"
                  />
                </el-col>
                <el-col :span="16">
                  <h6>
                    <strong>本站小编客服-SAP刀客</strong>
                  </h6>
                  <p style="font-size:12px;">
                    SAP培训课程咨询！
                    <br />本站各类资料购买和下载客服！
                    <br />本站招聘版块免费入住洽谈！
                  </p>
                </el-col>
              </el-row>
              <el-row class="second" :gutter="3">
                <el-col :span="8">
                  <img
                    src="../../assets/wyq-image/wx.gif"
                    class="img-responsive"
                    style="opacity:0.8;"
                  />
                </el-col>
                <el-col :span="16">
                  <h6>
                    <strong>本站小编客服-SAP刀客</strong>
                  </h6>
                  <p style="font-size:12px;">
                    SAP文库5号微信群
                    <br />SAP同行技术交流！
                    <br />SAP行业资讯，招聘信息分享！
                  </p>
                </el-col>
              </el-row>
              <el-row class="third" :gutter="3">
                <el-col :span="24">
                  <div class="col-sm-12" style="padding:0px">
                    本站全新改版，注册最多
                    <strong>赠送400积分</strong>!
                    <br />
                    <strong style="color:#ff0000">欢迎HR和猎头免费入驻发布招聘信息！</strong>本站5个微信群每周免费推送优质职位！
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- ////岗位 -->
    <div class="job">
      <table class="content">
        <tr v-for="(item,index) in jobList" :key="index">
          <td
            v-for="(subItem, subIndex) in jobList[index]"
            :key="subIndex"
            :class="tdColor(index,subIndex)"
          >
            <el-popover
              placement="left"
              trigger="hover"
              style="overflow: hidden;text-overflow:ellipsis"
            >
              <div
                class="titlediv"
                style="font-weight: bold; white-space:nowrap;text-overflow:ellipsis;text-overflow:ellipsis;widht:50%;font-family: Microsoft YaHei;"
              >{{item.title}}</div>
              <!-- 隐藏部分 -->
              <div style="text-overflow:ellipsis; width:350px;">
                <p v-html="subItem.content"></p>
                <img v-if="subItem.src !='null'" :src="subItem.src" />
              </div>
              <!-- 显示部分 -->
              <div slot="reference">
                <p>{{subItem.title}}</p>
                <span class="label label-primary" v-if="index == 0 ||subItem.assort == '全职'">入职</span>
                <span class="label label-success" v-else>自由</span>
                <span class="label label-warning">{{subItem.task}}</span>
                <span class="text-warning">
                  <strong>{{subItem.wages}}</strong>
                </span>
                <span class="label label-warning">{{subItem.area}}</span>
              </div>
            </el-popover>
          </td>
        </tr>
      </table>
    </div>

    <!-- ////图书&标签 -->
    <div class="ebook">
      <div class="content clearfix">
        <div class="fl left xb clearfix">
          <!-- 左侧导航 -->
          <div class="col-sm-12" style="margin:0px;padding:5px 0px 5px 8px">
            <h5 style="display:inline">
              <strong>
                <a href="javascript::">SAP Press英文原版图书</a>
              </strong>
            </h5>»
            <a href="javascript:;" style="font-size:12px;display:inline">查看全部</a>
          </div>

          <!-- 左侧图片 -->
          <a class="bTp" href="javascript:;" v-for="(item,index) in yeData['arr5']" :key="index">
            <img :src="item.src" alt />
          </a>
        </div>
        <div class="fr right xb">
          <!-- 顶部标题 -->
          <div class="navTop">
            <span>
              <strong>
                <a href="javascript:;">图书标签</a>
              </strong>
            </span>
          </div>
          <div class="eBook-label">
            <span
              v-for="(item, index) in bookLabel"
              :class="['pad', 'label', csLabel(index)]"
              :key="index"
            >
              {{item.txt}}
              <span class="badge">{{item.num}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- ////spa下载 -->
    <div class="spaDown">
      <div class="content clearfix">
        <div class="fl xb first">
          <!-- 顶部标题 -->
          <div class="navTop">
            <span>
              <strong>
                <a href="javascript:;">SAP项目资料下载</a>
              </strong>
            </span>
          </div>

          <!-- 左侧内容区 -->
          <ul style="padding: 0">
            <li
              style="list-style:none;margin:0px;padding:3px;font-size:12px;color:#808080"
              v-for="(item,index) in yeData['arr1']"
              :key="index"
            >
              <i class="icon iconfont icon-arrow-right" style="color:#808080"></i>
              <a href="javascript:;">{{item.title}}</a>
              <span
                class="label label-success"
                style="font-size:6px;padding:1px 2px 1px 2px;"
                v-show="item.isFree"
              >FREE</span>
              <i
                class="icon iconfont icon-fire"
                style="float:right;color:#808080;font-size:10px"
              >{{item.num}}</i>
            </li>
          </ul>
        </div>
        <div class="fl xb">
          <!-- 顶部标题 -->
          <div class="navTop">
            <span>
              <strong>
                <a href="javascript:;">SAP视频教程下载</a>
              </strong>
            </span>
          </div>

          <!-- 中部内容区 -->
          <ul style="padding: 0">
            <li
              style="list-style:none;margin:0px;padding:3px;font-size:12px;color:#808080"
              v-for="(item,index) in yeData['arr2']"
              :key="index"
            >
              <i class="icon iconfont icon-arrow-right" style="color:#808080"></i>
              <a href="javascript:;">{{item.title}}</a>
              <span
                class="label label-success"
                style="font-size:6px;padding:1px 2px 1px 2px;"
                v-show="item.isFree"
              >FREE</span>
              <i
                class="icon iconfont icon-fire"
                style="float:right;color:#808080;font-size:10px"
              >{{item.num}}</i>
            </li>
          </ul>
        </div>
        <div class="fr xb toTop">
          <!-- 顶部标题 -->
          <div class="navTop">
            <span>
              <strong>
                <a href="javascript:;">SAP PA标准教材下载</a>
              </strong>
            </span>
          </div>

          <!-- 右侧内容区 -->
          <ul style="padding: 0">
            <li
              style="list-style:none;margin:0px;padding:3px;font-size:12px;color:#808080"
              v-for="(item,index) in textbookList"
              :key="index"
            >
              <p style="font-size:12px;margin:5px;padding:5px;border-bottom:1px solid #e7e7e7">
                <a href="javascript:;">{{item.textbook}}</a>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- ////热门推荐 -->
    <div class="hotBook">
      <div class="content clearfix">
        <div class="fl xb first">
          <!-- 顶部标题 -->
          <div class="navTop">
            <span>
              <strong>
                <a href="javascript:;">热门SAP教材下载</a>
              </strong>
            </span>
          </div>

          <!-- 左侧内容区 -->
          <ul style="padding: 0">
            <li
              style="list-style:none;margin:0px;padding:3px;font-size:12px;color:#808080"
              v-for="(item,index) in yeData['arr3']"
              :key="index"
            >
              <i class="icon iconfont icon-arrow-right" style="color:#808080"></i>
              <a href="javascript:;">{{item.title}}</a>
              <span
                class="label label-success"
                style="font-size:6px;padding:1px 2px 1px 2px;"
                v-show="item.isFree"
              >FREE</span>
              <i
                class="icon iconfont icon-fire"
                style="float:right;color:#808080;font-size:10px"
              >{{item.num}}</i>
            </li>
          </ul>
        </div>
        <div class="fl xb">
          <!-- 顶部标题 -->
          <div class="navTop">
            <span>
              <strong>
                <a href="javascript:;">热门文库文章</a>
              </strong>
            </span>
          </div>

          <!-- 右侧内容区 -->
          <ul style="padding: 0">
            <li
              style="list-style:none;margin:0px;padding:3px;font-size:12px;color:#808080"
              v-for="(item,index) in yeData['arr4']"
              :key="index"
            >
              <i class="icon iconfont icon-arrow-right" style="color:#808080"></i>
              <a href="javascript:;" v-html="item.title"></a>
              <i
                class="icon iconfont icon-fire"
                style="float:right;color:#808080;font-size:10px"
              >{{item.num}}</i>
            </li>
          </ul>
        </div>
        <div class="fr xb right">
          <!-- 顶部标题 -->
          <div class="navTop">
            <span>
              <strong>
                <a href="javascript:;">友情链接</a>
              </strong>
            </span>
          </div>
          <!-- 内容区 -->
          <div class="col-sm-12" style="padding:2px 10px 2px 10px">
            <a href="http://www.javaweb.io">
              <i class="icon iconfont icon-lianjie" style="font-size:20px;color:#808080"></i> javaweb开发者社区
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- ////底部 -->
    <div class="footer">
      <div class="content">
        <span>本站所有电子书全部来自于互联网，欢迎大家给小编投稿+V:FICODK</span>
        <p>
          © 2018 All Rights Reserved by SAPDOC.cn. |
          <a href="javascript:;">沪ICP备17005776号-3</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import yeData from "./data";
import _ from "lodash";
export default {
  data() {
    return {
      wordList: [
        {
          ti: "SAP文库全新改版，注册最多",
          str: "赠送400积分",
          wei: "用于购买各类资料！"
        },
        {
          ti: " 欢迎猎头和HR入住，",
          str: "免费发布SAP招聘信息！本站5个微信群同步免费推送！"
        },
        {
          ti:
            "本站所有内容均来自互联网用户分享，如有违规内容，纯属本站管理不善，请及时联系我们删除。"
        }
      ],
      jobList: [],
      bookLabel: [],
      bookPic: [],
      textbookList: [],
      yeData: yeData
    };
  },
  methods: {
    // 动态文字
    showMarquee: function() {
      setTimeout(() => {
        // 数组前移
        this.wordList.push(this.wordList[0]);
        this.wordList.shift();
      }, 700);
    },
    // 工作栏-P标签颜色
    tdColor(i, subI) {
      if (subI == 3 || ((subI == 1 || subI == 2) && i != 2)) return "red";
      else return "";
    },
    // 彩色标签
    csLabel(n) {
      n = n % 6;
      switch (n) {
        case 0:
          return "label-default";
        case 1:
          return "label-primary";
        case 2:
          return "label-success";
        case 3:
          return "label-info";
        case 4:
          return "label-warning";
        case 5:
          return "label-danger";
      }
    },
    // 获取数据
    async getDate() {
      const { data: res } = await this.$axios.get("/index");
      let {
        jobList,
        bookLabel,
        bookPic,
        textbookList,
        hotTextBooks
      } = res.data;

      this.jobList = _.chunk(jobList, 4);
      this.bookLabel = bookLabel;
      this.bookPic = bookPic;
      this.textbookList = textbookList;
    }
  },
  created() {
    setInterval(this.showMarquee, 2000);
    this.getDate();
  }
};
</script>

<style lang="less" scoped>
.index {
  background-color: #fcf8e3;

  .content {
    width: 1170px;
    margin: 0 auto;
  }

  // 加边框 加背景
  .xb {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 0 5px;
  }

  .navTop {
    margin-bottom: 5px;
    padding: 5px 5px 10px 5px;
    border-bottom-style: solid;
    border-bottom-color: #e7e7e7;
    border-bottom-width: 1px;

    span {
      padding-bottom: 10px;
      margin-bottom: -10px;
      border-bottom-color: #f98181;
      border-bottom-style: solid;
      border-bottom-width: 2px;
      font-size: 14px;
    }

    a {
      color: #333;
    }
  }

  a {
    color: #333;
  }

  li .label-success {
    margin-left: 4px;
  }
}

/******** 顶部搜索 */
.top-search {
  width: 100%;
  height: 50px;
  background-color: #fff;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;

  .content {
    width: 1150px;
    height: 100%;
    margin: 0 auto;
  }

  .word {
    position: relative;
    float: left;
    color: #808080;
    width: 700px;
    height: 20px;
    overflow: hidden;
    margin-top: 15px;

    span.one {
      color: #428bca;
      float: left;
      margin-right: 35px;
    }

    li {
      background-color: #fff;
    }
  }

  .search {
    position: relative;
    top: 5px;
    float: right;
  }
}

/******** 课程招生 */
.course {
  height: 344px;
  background-color: #344792;
  padding-top: 18px;

  .content {
    width: 1233px;
    height: 100%;
    margin: 0 auto;

    & > .el-row,
    .el-col {
      height: 100%;
    }
  }

  .left {
    height: 100%;

    & > .el-row {
      height: 50%;
    }

    .row1 {
      & > .el-col {
        width: 50%;
      }

      a {
        display: inline-block;
        width: 423px;
        height: 188px;
        margin-left: 13px;
      }

      .t {
        margin-left: 16px;
      }
    }

    img {
      width: 100%;
      height: 100%;
    }

    .row2 {
      & > .el-col {
        width: 33%;
        margin-left: 0.2%;
      }

      a {
        display: inline-block;
        width: 277.5px;
        height: 111px;
        margin-top: 34px;
        margin-left: 10px;
      }
    }
  }

  .right {
    height: 100%;

    & > .el-row {
      height: 33%;
      padding-top: 8px;
      padding-left: 8px;
    }

    .el-col {
      height: 100%;
    }

    img {
      margin-right: 2px;
    }

    .first {
      background-color: #fff;
    }

    .second {
      background-color: #fcf8e3;
    }

    .third {
      height: 23%;
      background-color: #f2dede;
    }
  }
}

/******** 岗位 */
.job {
  table {
    border-collapse: collapse;
    border: 1px solid #ddd;
    background-color: #fff;
  }

  tr > td:nth-child(3) {
    width: 21%;
  }

  td {
    border: 1px solid #ddd;
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;

    p {
      margin-bottom: 5px;
    }

    & > span {
      margin-right: 2px;
    }

    .label {
      margin-left: 4px;
    }
  }

  td.red {
    p {
      color: #a94442;
    }

    .text-danger {
      color: #a94442;
    }

    .label-warning {
      background-color: #d9534f;
    }
  }

  tr {
    width: 100%;
  }
}

/******** 图书&标签 */
.ebook {
  margin: 12px 0;
  .left {
    width: 872px;
    height: 506px;

    a {
      color: #333;
    }

    img {
      width: 164px;
    }
  }

  .bTp {
    padding: 4px;
  }

  .right {
    width: 292px;
    height: 413px;
  }

  // 图书标签
  .eBook-label {
    width: 100%;
    height: 100%;
    padding-left: 5px;

    span.pad {
      display: inline-block;
      font-size: 12px;
      margin-bottom: 5px;
      font-weight: 400;
      margin-right: 3px;
    }

    span.badge {
      display: inline-block;
      min-width: 8px;
      padding: 2px 5px;
      font-size: 10px;
      font-weight: bold;
      color: #808080;
      line-height: 1;
      vertical-align: middle;
      white-space: nowrap;
      text-align: center;
      background-color: #fff;
      border-radius: 10px;
    }

    .label {
      cursor: pointer;
    }
  }
}

/******** spa下载 */
.spaDown {
  a {
    color: #333;
  }

  .fl {
    width: 430px;
    height: 489px;
  }

  .first {
    margin-right: 6px;
  }

  .toTop {
    width: 292px;
    height: 584px;
    margin-top: -95px;
    .navTop {
      margin-bottom: 0;
    }

    a {
      font-size: 13px;
    }
  }
}

/******** 热门推荐 */
.hotBook {
  margin: 12px auto;
  .content > div {
    width: 430px;
    height: 490px;
  }

  .content > .right {
    width: 292px;
    height: 73px;
  }

  .first {
    margin-right: 7px;
  }
}

/******** 底部栏  */
.footer {
  margin-top: 5px;
  height: 60px;
  padding: 10px 0;
  color: #999;
  text-align: center;
  background-color: #2e2e2e;

  a {
    color: #e5e5e5;
  }
}
</style>